<template>
  <div :class="zn_nav">
    <van-row>
      <van-col span="20" offset="2">
        <div v-if="type === 'floor'" class="van_cells">
          <van-cell
            icon="arrow-left"
            size="large"
            :title="erect_name"
            @click="changeType('erect')"
          />
        </div>
        <div v-if="type === 'erect'">
          <div class="groups">
            <div class="van_cells" v-for="item in erectData" :key="item">
              <van-cell-group>
                <van-cell
                  icon="wap-home-o"
                  size="large"
                  is-link
                  @click="floor(item.id, item.erect_name)"
                  :title="item.erect_name"
                />
              </van-cell-group>
            </div>
          </div>
        </div>
        <div v-if="type === 'floor'">
          <div class="groups">
            <div class="van_cells">
              <van-swipe indicator-color="white" @change="onChange">
                <van-swipe-item
                  v-for="item in floorData"
                  style="background-color: #1f94f4"
                  :key="item"
                >
                  <van-image fit="contain" :src="item.img" />
                </van-swipe-item>
                <div class="custom-indicator" slot="indicator">
                  <p>{{ dang.floor }}</p>
                  <div>
                    {{ dang.remarks }}
                  </div>
                </div>
              </van-swipe>
            </div>
          </div>
          <div class="but" style=""></div>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  name: "nei",
  data() {
    return {
      type: "erect",
      hid: -1,
      erectData: [],
      erect_name: "",
      floorData: [],
      dang: {
        floor: "",
        remarks: "",
      },
      zn_nav: "zn_nav",
    };
  },
  mounted() {
    this.hid = this.$route.query.hid;
    this.erect();
  },
  methods: {
    //获取建筑数据
    erect() {
      this.axios
        .post("/app/wechat/Navigat/getErect/mid/2.html", { hid: this.hid })
        .then(({ data }) => {
          if (data.error === 0) {
            this.erectData = data.info;
          }
        });
    },
    //获取楼层建筑信息
    floor(id, name) {
      this.erect_name = name;
      this.axios
        .post("/app/wechat/Navigat/getFloor/mid/2.html", { eid: id })
        .then(({ data }) => {
          if (data.error === 0) {
            this.floorData = data.info;
            this.dang = this.floorData[0];
            this.type = "floor";
            this.zn_nav = "floor";
          }
        });
    },
    onChange(index) {
      console.log(index);
      this.dang = this.floorData[index];
      console.log(this.dang);
    },
    changeType(type) {
      this.type = type;
      this.zn_nav = "zn_nav";
    },
  },
};
</script>

<style scoped>
.zn_nav {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: url(../../../assets/img/glyy.jpg) no-repeat center center;
  background-size: cover;
  position: relative;
}
.floor {
  width: 100%;
  height: 100vh;
  background-color: #cfcfcf;
}
.van_cells {
  margin-top: 3vh;
  border-radius: 10px;
  overflow: hidden;
}
.groups:first-child {
  margin-top: 15vh;
}
.but {
  text-align: center;
}
.but button {
  margin-left: 5px;
}
</style>